<template>
	<view>
		<!-- <cu-custom :isBack="true">
			<block slot="content">我的资料</block>
		</cu-custom> -->
		<view class="bg">
			<view style="padding: 100rpx 650rpx 0rpx 30rpx;">
				<view class="cuIcon-back" @tap="isback" style="font-size: 40rpx;"></view>
			</view>
			<view style="padding: 20rpx 30rpx 0rpx 660rpx;">
				<view class="cuIcon-camerafill" @tap="release" style="font-size: 60rpx;"></view>
			</view>
		</view>
		<view class="headpic">
			<image class="headpicture" :src="user_info.avatar"></image>
		</view>
		<view class="bigbox" style="width: 100%;">
			<view class="recentinfo solid-bottom" v-for="(item,index) in list" :key="index" :data-job_id="item.user_id"
				:data-id="index">
				<view class="squareslist flex">
					<image style="width: 100rpx; height: 100rpx; border-radius: 10rpx; margin-right: 20rpx;"
						:src="item.avatar"></image>
					<view class="circlename">{{item.nickname||item.real_name}}
						<view class="flex">
							<view class="tiemword">{{timeToStr(item.add_time,"MM-dd hh:mm")}}</view>
							<view class="shanchu cuIcon-friend" v-if="user_info.nickname == item.nickname" @click="sureshanchu(index)">删除</view>
						</view>
						<!-- <view class="school_id">加入时间：{{timeToStr(student_info.add_time,"YY-MM/dd hh:mm")}}</view> -->
					</view>
				</view>
				<view class="contentWord" style="white-space:pre-wrap">{{item.content}}</view>
				<view class="imglist-box">
					<block v-if="item.type==1">
						<view class="oneimage" v-if="item.images.length == 1">
							<image v-for="(imgItem,imgIndex) in item.images" :key='imgIndex' :src="imgItem"
								class="oneimage-box" @tap="previewImage(imgItem,index)" mode="aspectFill"
								v-if="image!=''">
							</image>
						</view>
						<!-- <view class="fourimage" v-if="item.images.length == 4">
							<image v-for="(imgItem,imgIndex) in item.images" :key='imgIndex' :src="imgItem" class="fourimage-box" @tap="previewImage(imgItem,index)"  mode="aspectFill" v-if="image!=''">
							</image>
						</view> -->
						<view v-else class="imagelist1">
							<image v-for="(imgItem,imgIndex) in item.images" :key='imgIndex' :src="imgItem"
								class="image_box" @tap="previewImage(imgItem,index)" mode="aspectFill" v-if="image!=''">
							</image>
						</view>
					</block>
					<block v-if="item.type==3">
						
					</block>
					<!-- <image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex"  :src="imgItem" @tap="picamplif"></image> -->
					<!-- <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="index"> -->
				</view>
				<view class="function_box">
					<view class="morefunction_box" v-show="show_more_index == index">
						<view class="more_box">
							<view>
								<text class="likeicon cuIcon-like"></text>
								<text class="zan">赞</text>
							</view>
							<view class="titleicon cuIcon-titles"></view>
							<view>
								<text class="likeicon cuIcon-new"></text>
								<text class="zan">评论</text>
							</view>
						</view>
					</view> 
					<view class="butmore" @click="morefunction(index)">
						<view class="butWords cuIcon-more"></view>
					</view>
				</view>
				<view class="sureshanchu_box" v-show="shanchu_index == index">
					<view class="shanchu_box_bg">
						<view class="shanchu_box_word">提示</view>
						<view class="shanchu_box_word">您确定要删除吗？</view>
						<view class="flex">
							<view class="shanchu_function" @click="closen_box(index)">
								<text class="box_closen">取消</text>
							</view>
							<view class="shanchu2_function" @click="shanchucircle(index)">
								<text class="box_shanchu">删除</text>
							</view>
						</view>
						
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg,
		timeToStr
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				user_info: {},
				url: 'http://www.555edu.com/d/file/2018-04-03/1617f058d34fa3d52031266d389580e2.jpg',
				url_a: 'http://newpic.jxnews.com.cn/003/028/833/00302883396_1216dd18.jpg',
				last_circle_id: '',
				user_id: '',
				circle_id: '',
				list: [],
				nickname: '',
				images: '',
				timeToStr: timeToStr,
				imgItem: '',
				show_more_index: -1,
				shanchu_index:-1,
				id:''
			}
		},
		onLoad() {
			appLogin((user_info) => {
				console.log(user_info)
				this.user_info = user_info
				this.getstudentinfo()
				this.getcirclelist()
			})
		},
		onshow(){
			this.getcirclelist()
		},
		methods: {
			release() {
				uni.navigateTo({
					url: "/pages/student/write"
				})
			},
			getstudentinfo() {
				httpGet({
					url: '/api/student/info'
				}).then((res) => {
					this.student_info = res.result
					console.log(res)
				})
			},
			getcirclelist() {
				httpGet({
					url: '/api/circle/list',
					data: {
						user_id: this.user_id,
						last_circle_id: this.last_circle_id,
					}
				}).then((res) => {
					console.log(res)
					this.list = this.list.concat(res.result.list)
				})
			},
			shanchucircle(index){
				console.log(this.list[index].circle_id)
				httpPost({
					url:'/api/circle/remove',
					data:{
						id:this.list[index].circle_id,
					}
				}).then((res)=>{
					console.log(res)
					this.list.splice(index,1);
					this.shanchu_index = -1
					this.getcirclelist()
				})
			},
			onReachBottom() {
				console.log(this.list, this.list.length)
				this.last_circle_id = this.list[this.list.length - 1].circle_id
				this.getcirclelist()
			},
			previewImage(imgItem, index) {
				console.log(this.list, index)
				uni.previewImage({
					current: imgItem,
					urls: this.list[index].images,
				})
			},
			isback() {
				uni.reLaunch({
					url: "/pages/student/business"
				})
			},
			morefunction(index) {
				if (this.show_more_index == index) {
					this.show_more_index = -1
				} else {
					this.show_more_index = index
				}
			},
			sureshanchu(index){
				if (this.shanchu_index == index) {
					this.shanchu_index = -1
				} else {
					this.shanchu_index = index
				}
			},
			closen_box(index){
				this.shanchu_index = -1
			}
		}
	}
</script>

<style>
	.imagelist1>image {
		width: 31.8%;
		height: 220rpx;
		/* margin-right: 20rpx;
		margin-bottom: 30rpx; */
		/* flex: 1; */
	}

	.bg {
		width: 100%;
		height: 470rpx;
		background: url(https://zhaojjw.cn/newjbh/202111165415753) no-repeat;
		background-size: 100% 100%;
	}

	.headpicture {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-top: -70rpx;
		position: absolute;
		right: 25rpx;
		/* margin-left: 600rpx; */

	}

	.headpic {
		margin-bottom: 30rpx;
	}

	.recentinfo {
		width: 100%;

		margin-bottom: 20rpx;
		padding: 35rpx;
	}

	.circlename {
		color: #586b95;
		font-size: 35rpx;
	}

	.squareslist {
		margin-bottom: 20rpx;
	}

	.tiemword {
		color: #b8b8b8;
		font-size: 25rpx;
		margin-top: 30rpx;
	}
	.shanchu{
		font-size: 20rpx;
		margin-top: 27rpx;
		margin-left: 20rpx;
	}

	.contentWord {
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	.imagelist1 {
		/* width: 95% ; */
		/* text-align: center; */
		/* margin: 0 auto; */
		/* margin-left: 6%; */
		/* display: flex;
		flex-wrap: wrap; */
	}

	.butmore {
		width: 70rpx;
		height: 40rpx;
		position: absolute;
		right: 30rpx;
		background-color: #ececec;
		/* float: right; */
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* margin-left: 600rpx; */
		margin-top: 50rpx;
	}

	.butWords {
		color: #3e5786;
		/* align-items: center; */
		font-weight: 900;
		text-align: center;
		font-size: 35rpx;
	}

	.image_box {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx 5rpx 0rpx 7rpx;
	}

	.oneimage-box {
		width: 410rpx;
		height: 410rpx;
		margin: 5rpx 5rpx 5rpx 5rpx;
	}

	.fourimage-box {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx 5rpx 0rpx 5rpx;
	}

	.fourimage {
		margin-right: 20%;
	}

	.imagelist {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.function_box {
		display: flex;
		height: 100rpx;
	}

	.more_box {
		position: absolute;
		right: 140rpx;
		width: 300rpx;
		height: 60rpx;
		background-color: #4c5153;
		border-radius: 15rpx;
		color: #FFFFFF;
		margin-top: 37rpx;
		padding-top: 5rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		display: flex;
	}

	.likeicon {
		font-size: 37rpx;
		/* height: 75rpx; */
		color: #FFFFFF;
		margin-right: 15rpx;
		/* margin-top: 15rpx; */
	}

	.zan {
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* margin-bottom: 15rpx; */
		/* margin-top: 3rpx; */
	}

	.titleicon {
		margin-right: 15rpx;
		margin-left: 15rpx;
		margin-top: 8rpx;
		color: #383e3f;
		font-size: 35rpx;
	}
	.shanchu_box_word{
		text-align: center;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}
	.sureshanchu_box{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: fixed;
		z-index: 999;
		padding-top: 500rpx;
		top: 0rpx;
		left: 0rpx;
	}
	.shanchu_box_bg{
		background-color: #FFFFFF;
		width: 600rpx;
		height: 270rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		border-radius: 15rpx;
	}
	.shanchu_function{
		height: 100rpx;
		line-height: 100rpx;
		border-right: solid 1rpx #e7e7e7;
		width:300rpx;
		border-top: solid 1rpx #e7e7e7;
		text-align: center;
		color: #000000;
		font-size: 30rpx;
	}
	.shanchu2_function{
		height: 100rpx;
		line-height: 100rpx;
		width:300rpx;
		border-top: solid 1rpx #e7e7e7;
		text-align: center;
		color: red;
		font-size: 30rpx;
	}
	.box_closen{
		/* border-right: solid 1rpx #e7e7e7;
		width: 300rpx; */
		height: 100rpx;
	}
</style>
